<template>
	<view class="content bg-light">
		<tabsTop tabName="签到送好礼"></tabsTop>
		<!-- 签到部分 -->
		<view class="sign" :style="'background-image:url('+bj+');'">
			<!-- <image class="bj" :src="bj"></image> -->
			<!-- 签到玩法 -->
			<view style="position: absolute;">
				<button class="but text-white mt-1" @click="showNotice">签到玩法</button>
			</view>
			<view v-if="isNotice" class="popup" @click="hideNotice">
				<view class="popup-content p-2">
					<view class="flex justify-between p-1">
						<view></view>
						<view style="font-size: 14px;">签到规则</view>
						<uni-icons @click="hideNotice" type="closeempty" size="20"></uni-icons>
					</view>
					<view class="p-2" style="font-size: 12px;">
						<ul>
							<li class="p-1">1.每日签到可以获得日签奖励，连续签到可以获得连签奖励;</li>
							<li class="p-1">2.每日最多可签到1次，断签则会重新计算连签天数;</li>
							<li class="p-1">3.活动以及奖励最终解释权终归商家所有。</li>
						</ul>
					</view>
					<view class="mt-2">
						<button class="notice_but" @click="hideNotice">知道了</button>
					</view>
				</view>
			</view>
			<!-- 签到小康币 -->
			<view class="text-white ml-1" style="line-height: 2.5;">{{signTitle}}</view>
			<!-- 连续签到天数 -->
			<view class="text-white ml-1" style="line-height: 2.5;">已连续签到{{data.day}}天</view>
			<!-- 日历 -->
			<view class="m-auto bg-white rounded"
				style="width: 95%;border: 1px solid white;height: 400px;margin-top: 17rpx;">
				<view class="calendar">
					<!-- 日历头部 -->
					<view>
						<!-- 插入模式 -->
						<uni-calendar class="uni-calendar--hook" :selected="info.selected" :showMonth="false"
							@change="change" @monthSwitch="monthSwitch" />
					</view>
					<!-- 日历底部 -->
					<view class="calendar-footer mt-5">
						<button v-if="Status === 'success'" class="sign_but m-auto text-white"
							@click="sign()">立即签到</button>
						<button v-else class="sign_but1 m-auto text-white">今日已签到</button>
					</view>
					<view v-if="showSignDialog" class="dialog">
						<uni-icons type="close" size="30" color="white" style="margin-left: 632rpx;" @click="hideSign"></uni-icons>
						<view class="bg-white" style="width:80%;height:150px;background-color: #3fbd01;">
							<view class="dialog-header text-center m-2 text-white">签到成功</view>
							<view class="dialog-content">
								<view class="p-1 text-center text-white">恭喜你获得以下奖励</view>
							</view>
							<view class="dialog-footer bg-white flex align-center">
								<image :src="Domain_ICON+'/coin.webp'" style="width: 40px;height: 40px;"></image>
								<view>
									<view style="font-size: 14px;">1小康币</view>
									<view style="font-size: 11px;">海量积分好礼等你来兑</view>
								</view>
								<view>
									<button class="chabut" @click="goShouye">查看</button>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			<!-- 连续签到可能奖励 -->
			<view class="bg-white m-auto mt-2 rounded" style="height: 120px;width: 95%;">
				<view class="font-sm ml-2" style="line-height: 2.8;">连续签到可领取以下奖励:</view>
				<view class="ml-2 bg-light" style="width: 33%;">
					<view class="font-small p-1 ml-1" style="line-height: 1.8;">连续7天</view>
					<view class="flex p-1 align-center justify-between ml-1">
						<view class="font-sm">5小康币</view>
						<image :src="Domain_ICON+'/coin.webp'" style="width: 40px;height: 40px;"></image>
					</view>
				</view>
			</view><strong></strong>
			<view style="height: 20rpx;"></view>
		</view>
		<!-- 精品商品 -->
		<view class="mt-3">
			<!-- 更多精品商品 -->
			<view class="wrapper">
				<view class="line ml-2 mr-2"></view>
				<view class="h6">更多精品商品</view>
				<view class="line ml-2 mr-2"></view>
			</view>
			<!-- 商品列表 -->
			<view class="product-list bg-white">
				<view class="sign_row flex flex-wrap m-auto">
					<!-- 循环生成两个商品数据 -->
					<view v-for="(item,index) in product" :key="index"
						:class="(index % 2 == 0) ? 'col-left' : 'col-right'">
						<view class="w-100" style="height: 250rpx;">
							<image :src="Domain_IMG+item.Picture_URL" mode="aspectFit" :alt="item.name" class="img">
							</image>
						</view>
						<view class="product-name text-ellipsis">{{item.Article_Name}}</view>
						<view class="product-price">￥{{item.specifications[0].Sales_Unit_Price}}</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 底部赞助信息 -->
		<botSponsor></botSponsor>
	</view>
</template>

<script>
	const app = getApp();
	import tabsTop from "@/components/tabs/tabs-top.vue";
	import tabsBottom from "@/components/tabs/tabs-bottom.vue";
	import botSponsor from "@/components/botsponsor/sponsor.vue"
	import {
		getWX2GoodsIdAction
	} from "@/api/index.js"
	import {
		getIsSign,
		getSignDays,
		getSign
	} from "@/api/sign.js"
	export default {
		components: { //轮播图组件
			tabsTop,
			tabsBottom,
			botSponsor // 底部赞助商
		},
		data() {
			return {
				Domain_IMG: app.globalData.Domain_IMG,
				Domain_ICON: app.globalData.Domain_ICON,
				bj: app.globalData.Domain_ICON + '/sign_bj.png',
				signTitle: '每日签到+1小康币',
				day: '0',
				info: {
					date: '',
					startDate: '',
					endDate: '',
					selected: []
				},
				// consecutiveDays: 7,
				number: 5,
				coin: app.globalData.Domain_ICON + '/coin.webp',
				product: [
					// {
					// 	image: app.globalData.Domain_ICON + '/rice.webp',
					// 	name: '七色糙米2.5kg/袋*1',
					// 	price: 29.9
					// },
					// {
					// 	image: app.globalData.Domain_ICON + '/rice.webp',
					// 	name: '七色糙米2.5kg/袋*1',
					// 	price: 29.9
					// },
					// {
					// 	image: app.globalData.Domain_ICON + '/rice.webp',
					// 	name: '七色糙米2.5kg/袋*1',
					// 	price: 29.9
					// },
					// {
					// 	image: app.globalData.Domain_ICON + '/rice.webp',
					// 	name: '七色糙米2.5kg/袋*1',
					// 	price: 29.9
					// },
					// {
					// 	image: app.globalData.Domain_ICON + '/rice.webp',
					// 	name: '七色糙米2.5kg/袋*1',
					// 	price: 29.9
					// },
					// {
					// 	image: app.globalData.Domain_ICON + '/rice.webp',
					// 	name: '七色糙米2.5kg/袋*1',
					// 	price: 29.9
					// },
				],
				isNotice: false,
				showSignDialog: false,
				data: [],
				Status: 'fail',
				form: {
					Open_ID: app.globalData.Open_ID,
					App_ID: app.globalData.App_ID,
					Enterprise_Info_SerialNumber: app.globalData.Enterprise_Info_SerialNumber
				},
				page: 1, // 商品页数
				limit: 7, // 每次刷新的条数
			}
		},
		onLoad() {
			this.isSign(this.form);
			this.getSignDays(this.form);
			this.getHwyxGoods();
		},
		onReady() {
			// const getDate = (date, AddDayCount = 0) => {
			// 	if (!date) {
			// 		date = new Date()
			// 	}
			// 	if (typeof date !== 'object') {
			// 		date = date.replace(/-/g, '/')
			// 	}
			// 	const dd = new Date(date)

			// 	dd.setDate(dd.getDate() + AddDayCount)

			// 	const y = dd.getFullYear()
			// 	const m = dd.getMonth() + 1 < 10 ? '0' + (dd.getMonth() + 1) : dd.getMonth() + 1
			// 	const d = dd.getDate() < 10 ? '0' + dd.getDate() : dd.getDate()
			// 	return {
			// 		fullDate: y + '-' + m + '-' + d,
			// 		year: y,
			// 		month: m,
			// 		date: d,
			// 		day: dd.getDay()
			// 	}
			// }

			// setTimeout(() => {
			// 	const now = new Date()
			// 	this.info.date = getDate(new Date(), -30).fullDate
			// 	this.info.startDate = getDate(new Date(), -60).fullDate
			// 	this.info.endDate = getDate(new Date(), 30).fullDate
			// }, 2000)
		},
		methods: {
			change(e) {
				console.log('change 返回:', e)
				// 模拟动态打卡
				if (this.info.selected.length > 5) return
				this.info.selected.push({})
				console.log('this.info.selected', this.info.selected);
			},
			monthSwitch(e) {
				console.log('monthSwitchs 返回:', e)
			},
			showNotice() {
				this.isNotice = true;
			},
			hideNotice() {
				this.isNotice = false;
			},
			showSign() {
				this.showSignDialog = true;
			},
			hideSign() {
				this.showSignDialog = false;
			},
			async isSign(form) {
				const res = await getIsSign(form)
				if (res.Status == "success") {
					this.Status = res.Status
				}
				console.log('getIsSign', res);
			},
			async getSignDays(form) {
				const res = await getSignDays(form)
				if (res.Status == "success") {
					this.info.selected = res.Data;
				}
				console.log('getSignDays', res);
			},
			async sign() {
				const res = await getSign(this.form)
				if (res.Status == "success") {
					this.showSign();
				}
				console.log('sign', res);
			},
			// 好物优选的商品查询
			async getHwyxGoods() {
				const res = await this.getGoods('C10000000000002');
				// console.log('res.tableData',res.tableData);
				this.product = res.tableData
				// console.log(this.goods);
				// this.goodslen = this.goods.length;
			},
			// 商品查询
			async getGoods(Id) {
				var canshu = {
					...this.canshu
				};
				canshu.ShopColumn_Id = Id;
				canshu.page = this.page;
				canshu.limit = this.limit;
				const res = await getWX2GoodsIdAction(canshu);
				if (res.Status = 'success') {
					return res;
				};
			},
			goShouye(){
				uni.navigateTo({
					url: "/pages/index/index",
				})
			}
		}
	}
</script>

<style>
	.uni-calendar__header.data-v-0682a296 {
		height: 38px;
		justify-content: flex-start;
	}

	.uni-calendar-item__weeks-box-item.data-v-6097fd5b {
		height: 85rpx !important;
	}

	.sign {
		position: relative;
		background-size: cover;
		background-repeat: no-repeat;
	}

	.bj {
		position: absolute;
		z-index: -1;
		width: 100%;
		height: 650px;
	}

	.but {
		width: 42px;
		height: 17px;
		left: 320px;
		background-color: rgba(128, 128, 128, 0.5);
		color: white;
		font-size: 7px;
		padding: 0;
		line-height: 2.5;
	}

	.sign_but {
		width: 90%;
		background-color: #42bb01;
		border-radius: 42rpx;
		height: 80rpx;
		font-size: 13px;
	}

	.sign_but1 {
		width: 90%;
		background-color: #9ede80;
		border-radius: 42rpx;
		height: 80rpx;
		font-size: 13px;
	}

	.wrapper {
		display: flex;
		align-items: center;
	}

	.line {
		flex-grow: 1;
		height: 1px;
		background-color: #dcdee0;
	}

	.col-left,
	.col-right {
		width: 50%;
		box-sizing: border-box;
		padding: 10px;
		border: 1px solid white;
	}

	.product-name,
	.product-price {
		font-size: 16px;
	}

	.product-price {
		color: #FF5722;
		font-weight: 700;
	}

	.popup {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background-color: rgba(0, 0, 0, 0.5);
		z-index: 999;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.popup-content {
		width: 100%;
		background-color: #fff;
		border-top-left-radius: 18px;
		border-top-right-radius: 18px;
		box-shadow: 0px -2px 4px rgba(0, 0, 0, 0.1);
		bottom: 0;
		position: absolute;
	}

	.notice_but {
		width: 95%;
		width: 95%;
		font-size: 13px;
		background-color: #09bb07;
		color: white;
		border-radius: 19px;
	}

	ul {
		list-style-type: decimal;
	}

	.dialog {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background-color: rgba(0, 0, 0, 0.5);
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		border-radius: 10px;
	}

	.dialog-header {
		font-size: 14px;
	}

	.dialog-content {
		font-size: 12px;
	}

	.dialog-footer {
		justify-content: space-around;
		padding: 0px;
		margin: 5px;
		height: 70px;
		border-radius: 10px;
	}

	.chabut {
		width: 47px;
		padding: 0px;
		font-size: 10px;
		border-radius: 14px;
		background-color: #09ba08;
		color: white;
	}
</style>